<template>
  <div class="app-container">
    <el-row>
      活动时间
    </el-row>
    <el-row>
      <el-table border :data='[""]'>
        <el-table-column label="奖池派发时间" align="center" prop="time">
          <template slot-scope="{}">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="operate">
          <template slot-scope="{}">
            <el-button v-if="roleCheck('save-activity-time')" type="primary" @click="saveTime">保存</el-button>
            <el-button v-else type="info" disabled>保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col :span="16">大奖置顶公告</el-col>
      <el-col :span="8">
        <el-button v-if="roleCheck('add-big-notice')" type="primary" @click="operateDialogFlag = true">新增</el-button>
        <el-button v-else type="info" disabled>新增</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-table
        border
        :data="tableData.list"
        v-loading="loading"
        element-loading-text="加载中..."
        class="el-table-align-center">
        <el-table-column prop="username" label="账号" align="center"></el-table-column>
        <el-table-column prop="reward" label="奖品显示" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="中奖时间" align="center">
          <template slot-scope="{row}">
            {{ row.createTime | toTime('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="{row}">
            <el-button v-if="roleCheck('start-big-notice') && row.status === 0" type="text" @click="operate(row, 'start')">开始</el-button>
            <el-button v-if="!roleCheck('start-big-notice') && row.status === 0" type="text" disabled>开始</el-button>
            <el-button v-if="row.status === 1" type="text">进行中</el-button>
            <el-button v-if="roleCheck('delete-big-notice')" type="text" @click="operate(row, 'delete')">删除</el-button>
            <el-button v-else type="text" disabled>删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                       :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                       :layout="gridLayout" :total="tableData.total">
        </el-pagination>
      </div>
    </el-row>

    <el-row>
      <div>奖品配置</div>
      <el-row type="flex" justify="space-around">
        <el-col :span="8">
          <div class="table-title">银球列表</div>
          <el-table
            border
            :data="awardList['0']"
            v-loading="loading"
            element-loading-text="加载中..."
            class="el-table-align-center">
            <el-table-column prop="name" label="奖品" align="center"></el-table-column>
            <el-table-column prop="price" label="价值" align="center"></el-table-column>
            <el-table-column prop="probability" label="获得机率" align="center"></el-table-column>
            <el-table-column prop="weights" label="权重" align="center"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <div class="table-title">金球列表</div>
          <el-table
            border
            :data="awardList['1']"
            v-loading="loading"
            element-loading-text="加载中..."
            class="el-table-align-center">
            <el-table-column prop="name" label="奖品" align="center"></el-table-column>
            <el-table-column prop="price" label="价值" align="center"></el-table-column>
            <el-table-column prop="probability" label="获得机率" align="center"></el-table-column>
            <el-table-column prop="weights" label="权重" align="center"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-row>
    <el-dialog title="新增" :visible.sync="operateDialogFlag" append-to-body width="26%">
      <add-get-award-dialog @refresh="refresh" :rowData="rowData" v-if='operateDialogFlag'
                            v-model="operateDialogFlag"></add-get-award-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { grid } from '@/build';
import addGetAwardDialog from './addGetAwardDialog';
import {
  getWinningNoticeList,
  showWinningNotice,
  deleteWinningNotice,
  getAssignJackpotTime,
  saveAssignJackpotTime,
} from '@/services/api/activity';
import awardList from './consts';

export default {
  name: 'config',
  components: { addGetAwardDialog },
  mixins: [grid],
  data() {
    const time = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      time,
      tableData: {
        list: [],
        total: 0,
      },
      filters: {
        size: 5,
        page: 1,
      },
      form: {
        id: undefined,
      },
      sendDingData: {
        beginTime: undefined,
        endTime: undefined,
      },
      gridLayout: 'total, prev, pager, next, jumper',
      awardList,
      rewardListFinal: [],
      operateDialogFlag: false,
      rowData: undefined,
      statusText: '开始',
    };
  },
  mounted() {
    this.bindGet(getAssignJackpotTime, 'time', {
      action: 'getTime',
      format: (data) => {
        return [_.toTime(data.beginTime), _.toTime(data.endTime)];
      },
    });
    this.bindSave(saveAssignJackpotTime, 'saveTime', 'sendDingData', {
      afterSuccess: ([result]) => {
        if (result) {
          this.statusText = '进行中';
        }
      },
    });
    this.bindGet(getWinningNoticeList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        return data;
      },
    });
    this.bindSave(showWinningNotice, 'start', 'form', {
      afterSuccess: ([result]) => {
        if (result) {
          this.refresh();
        }
      },
    });
    this.bindSave(deleteWinningNotice, 'delete', 'form', {
      afterSuccess: ([result]) => {
        if (result) {
          this.refresh();
        }
      },
    });
    this.getAll();
  },
  methods: {
    saveTime() {
      this.sendDingData.beginTime = this.time[0];
      this.sendDingData.endTime = this.time[1];
      this.doSave({ action: 'saveTime' });
    },
    operate({ id, status }, type) {
      if (status === 1 && type === 'start') {
        return;
      }
      this.form.id = id;
      this.doSave({ action: type });
    },
    getList() {
      this.doGet({ action: 'getGrid' });
    },
    openRemark(row) {
      this.rowData = row;
      this.operateDialogFlag = true;
    },
    refresh() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 30px;
  }

  .table-title {
    font-size: 14px;
    line-height: 24px;
    border: 1px solid #ebeef5;
    border-bottom: none;
    text-align: center;
  }
</style>
